<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.0.1/mustache.js"></script>

    <script type="text/javascript">
        var data = {
            "company": "Apple",
            "address": {
                "street": "1 Infinite Loop Cupertino</br>",
                "city": "California ",
                "state": "CA ",
                "zip": "95014 "
            },
            "product": ["Macbook ", "iPhone ", "iPod ", "iPad "],
            "wrapped": function() {
                return function(text, render) {
                    return "<b>" + render(text) + "</b>"
                }
            }
        };
        // var tpl = '<h1>Hello {{company}}</h1>';
        // var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}';
        // var tpl = '{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}';
        // var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';

        // var tpl = `{{#wrapped}} {{company}} is awesome. {{/wrapped}}`;

        // var tpl = `<h1>Hello {{company}}</h1>
        // {{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}
        // {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}

        // `;
        // var html = Mustache.render(tpl, data);


        var data = {
            "company": "Apple",
            "address": {
                "state": "CA",
                "zip": "95014 "
            }
        };
        var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
        var partials = {
            address: "{{#address}} <p>{{state}},{{zip}}</p> {{/address}}"
        }
        var html = Mustache.render(tpl, data, partials);



        console.log(html)
    </script>

    <script id="template" type="x-tmpl-mustache">
        {{name}}
    </script>
    <script type="text/javascript">
        var template = document.getElementById('template').firstChild.nodeValue;
        var r = Mustache.render(template, {
            name: 'wan'
        });
        console.log(r);
    </script>
</body>

</html>